// 搜索组件
define(['backbone'], function(Backbone) {
	var SearchBox = Backbone.View.extend({
		el: '.com-header',
		initialize: function(opt) {
			var defaults = {
				isShow: false // 是否展开
			}
			this.Options = _.extend({}, defaults, opt);
			this.renderEls();
		},
		events: {
			'click #j_search': 'evt_showSearchBox',
			'click #j_search_close': 'evt_hideSearchBox'
		},
		renderEls: function() {
			this.els = {
				headerTitle: this.$('.com-header-title'),
				otherBtn: this.$('.item-r'),
				searchBox: this.$('.com-global-search')
			}
		},
		show: function() {
			var $searchBox = this.els.searchBox;
			this.els.headerTitle.css('opacity', 0);
			this.els.otherBtn.css('opacity', 0);
			$searchBox.animate({
				'opacity': 0,
				'translateX': '100%'
			}, 0, function() {
				$searchBox.show().animate({
					'opacity': 1,
					'translateX': 0
				}, 300, 'ease-out');
			});
		},
		evt_showSearchBox: function() {
			if (!this.Options.isShow) {
				this.Options.isShow = true;
				this.show();
			}
		},
		evt_hideSearchBox: function() {
			var _searchBox = this;
			var els = this.els;
			els.searchBox.animate({
				'opacity': 0,
				'translateX': '100%'
			}, 300, 'ease-in', function() {
				els.searchBox.hide();
				els.headerTitle.css('opacity', 1);
				els.otherBtn.css('opacity', 1);
				_searchBox.Options.isShow = false;
			});
		}
	});
	return SearchBox;
});